<template>
	<div class="default-main ba-table-box">
		<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

		<!-- 表格顶部菜单 -->
		<TableHeader :buttons="['refresh', 'add', 'comSearch', 'quickSearch', 'columnDisplay', 'excel']" />

		<!-- 表格 -->
		<!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
		<Table ref="tableRef" />

		<!-- 表单 -->
		<PopupForm />


	</div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue"
import baTableClass from "/@/utils/baTable"
import PopupForm from "./popupForm.vue"
import Table from "/@/components/table/index.vue"
import TableHeader from "/@/components/table/header/index.vue"

import { baTableApi, fileUpload } from "/@/api/common"

//接收父组件传过来的值
const props = defineProps<{
	id: number
}>()
const tableRef = ref()
const baTable = new baTableClass(
	new baTableApi("/admin_api/user_bill/"),
	{
		column: [
			{ type: "selection", align: "center", operator: false },
			// { label: "ID", prop: "id", align: "center", operator: "=", operatorPlaceholder: "查询", width: 70 },
			{ label: "直播间ID", prop: "room_id", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "用户ID", prop: "user_id", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "头像", prop: "avatar", align: "center", render: "image", operator: false },
			{ label: "昵称", prop: "nickname", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "观看时长", prop: "total_viewing_time", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "消费金额", prop: "pay_amount", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },
			{ label: "领取金额", prop: "amount", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" },

			{
				label: "状态",
				prop: "status",
				align: "center",
				render: "tag",
				replaceValue: { "0": "未发放", "1": "已发放", "2": "发放失败" }
			},
			{ label: "错误原因", prop: "error", align: "center", operator: "LIKE", operatorPlaceholder: "模糊查询" ,showOverflowTooltip: true},

			{
				label: "创建时间",
				prop: "create_time",
				align: "center",
				render: "datetime",
				sortable: "custom",
				operator: "RANGE",
				width: 160
			},{
				label: "修改时间",
				prop: "update_time",
				align: "center",
				render: "datetime",
				sortable: "custom",
				operator: "RANGE",
				width: 160
			},

		],
		dblClickNotEditColumn: ['all']
	},
	{
		defaultItems: {
			total: 100,
			money: 0.3,
			watch_time: 40,
			c_id: 40,
			status: "1"
		}
	}
)

baTable.mount()
baTable.table.filter.room_id = props.id
baTable.getIndex()

provide("baTable", baTable)


</script>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
	name: "user/user"
})
</script>

<style scoped lang="scss"></style>
